import { useState, useMemo, useCallback, useRef, useReducer } from "react"
import { Button } from "antd"

function Demo2() {
    // 1.通过useState声明组件状态：需通过setState方法修改
    const [state, setState] = useState({
        name: "张三",
        age: 18,
    })
    const setAge = () => {
        let _age = state.age + 1
        setState({
            ...state, // 通过setState修改组件状态时，需要使用展开运算符，否则会丢失其他状态
            age: _age,
        })
    }

    // 2.通过useReducer声明组件状态：需通过dispatch方法修改，适用于复杂状态管理（dispatch是用于触发状态更新的函数，不应直接在渲染中调用）
    const [count, dispatch] = useReducer(typeReducer, 0)
    function typeReducer(count, action) {
        switch (action) {
            case 0:
                return count + 1
            case 1:
                return count - 1
            default:
                return count
        }
    }

    // 3.通过useRef声明组件状态：需通过current属性修改，适用于保存可变值（如DOM节点、计时器等），不会触发组件重新渲染
    const domRef = useRef(null)
    function getRef() {
        alert(domRef.current.innerText) // 获取dom实例对象
    }

    return (
        <div className="main_box">
            <h1>本案例展示 组件数据声明和使用 （class组件见demo1_2）</h1>

            <div className="main_row">
                <p>1.通过useState声明组件状态：需通过setState方法修改</p>
                <div>
                    姓名：{state.name} 年龄：{state.age}
                    <Button onClick={() => setAge()} type="primary">
                        年龄+1
                    </Button>
                </div>

                <p>2.通过useReducer声明组件状态：需通过dispatch方法修改，适用于复杂状态管理</p>
                <div>
                    当前count: {count} <Button onClick={() => dispatch(0)}>count++</Button>
                    <Button onClick={() => dispatch(1)}>count--</Button>
                </div>

                <p>3.通过useRef声明组件状态：需通过current属性修改，适用于保存可变值（如DOM节点、计时器等），不会触发组件重新渲染</p>
                {/* 错误用法 dispatch是用于触发状态更新的函数，不应直接在渲染中调用*/}
                {/* <div> {dispatch(0)} </div> */}
                <div>
                    <span ref={domRef}>我是ref</span>
                    <Button onClick={() => getRef()}>获取ref内容</Button>
                </div>
            </div>
        </div>
    )
}

export default Demo2
